<!-- 新增活动  -->
<template>
  <div class="add_page">

    <!-- 顶部导航 开始 -->
    <div class="top_menu">
      <div class="back" @click="goBack">
        <i class="el-icon-arrow-left"></i>
        <span>返回</span>
      </div>
      <el-divider direction="vertical"></el-divider>
      <div class="menu">
        <el-tabs v-model="activeMenu" :before-leave="onBeforeLeave">
          <el-tab-pane label="基础信息" name="1"></el-tab-pane>
          <el-tab-pane label="报名信息" name="2"></el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <!-- 顶部导航 end -->

    <!-- 内容区域-基础信息 开始 -->
    <div class="content_box" v-show="activeMenu == 1">
      <el-form ref="addForm" :model="addForm" :rules="addFormRules" :size="formSize" :label-width="labelWidth">
        <el-form-item label="活动名称：" prop="name">
          <el-input v-model.trim="addForm.name" class="a_input" placeholder="请输入活动名称"></el-input>
          <span class="input_tips">该名称仅内部可见</span>
        </el-form-item>
        <el-form-item label="来源：" prop="channelSource">
          <user-source v-model="addForm.channelSource" class="a_select" :size="formSize" :multiple="false"></user-source>
        </el-form-item>
        <el-form-item label="广告代号：" prop="adSource">
          <adcode-select v-model="addForm.adSource" class="a_select" :size="formSize" :multiple="false"></adcode-select>
        </el-form-item>
        <el-form-item label="活动城市：">
          <city-select v-model="addForm.city" class="a_select" :size="formSize" :multiple="false"></city-select>
        </el-form-item>
        <el-form-item label="页面标题：" prop="pageTitle">
          <el-input v-model.trim="addForm.pageTitle" class="a_input" placeholder="请输入页面标题"></el-input>
        </el-form-item>
        <el-form-item label="顶部图片：">
          <image-upload v-model="addForm.bannerPic"></image-upload>
        </el-form-item>
        <el-form-item label="活动主题：">
          <el-input v-model.trim="addForm.topic" class="a_input" placeholder="请输入活动主题"></el-input>
        </el-form-item>
        <el-form-item label="活动描述：">
          <!-- <el-input type="textarea" v-model.trim="addForm.remark" class="a_area" rows="5" resize="none" placeholder="请输入活动描述"></el-input> -->
          <wang-editor :key="randomKey" v-model="addForm.remark" />
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="nextStep()">保存，下一步</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 内容区域-基础信息 end -->

    <!-- 内容区域-报名信息 开始 -->
    <div class="content_box" v-show="activeMenu == 2">
      <el-form ref="applyForm" :model="applyForm" :size="formSize" :label-width="labelWidth">
        <el-form-item :label="item.itemLabel + '：'" v-for="(item,index) in applyList" :key="index" class="">
          <div class="el_form_item">
            <div class="left_box">
              <el-input v-model="applyForm.name" class="a_sort_input" :disabled="isDisabled" v-if="item.itemType == 'input'"></el-input>

              <el-radio-group v-model="applyForm.radio" v-if="item.itemType == 'radio'" :disabled="isDisabled" :class="item.itemList.length>2?'el_radio_group':''">
                <el-radio v-for="(citem,idx) in item.itemList" :key="`c_${idx}`" :label="citem.itemOrder">{{citem.itemLabel}}</el-radio>
              </el-radio-group>

              <el-checkbox-group v-model="applyForm.checkList" v-if="item.itemType == 'checkbox'" :disabled="isDisabled" class="el_radio_group">
                <el-checkbox v-for="(citem,idx) in item.itemList" :key="`c_${idx}`" :label="citem.itemLabel" :value="citem.itemOrder"></el-checkbox>
              </el-checkbox-group>
            </div>

            <div class="right_box">
              <el-checkbox v-model="item.showFlag">页面展示</el-checkbox>
              <el-checkbox v-model="item.required">必填</el-checkbox>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="saveInfo()">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 内容区域-报名信息 end -->

  </div>
</template>
<script>
import ImageUpload from "@/components/upload/index.vue";
import {
  GET_ACTIVITY_QUESTIONNAIRES,
  GET_ACTIVITY_INFO,
  ADD_ACTIVITY_INFO,
  EDIT_ACTIVITY_INFO,
} from "@/http/clues";
import { deepClone, showToast } from "@/common/util";
import { BASEURL } from "@/http/interface";
import WangEditor from "@/components/wangEditor/index.vue";
export default {
  components: {
    ImageUpload,
    WangEditor,
  },
  data() {
    return {
      activeMenu: "1",
      addForm: {},
      addFormRules: {
        name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
        channelSource: [
          { required: true, message: "请选择来源", trigger: "change" },
        ],
        adSource: [
          { required: true, message: "请选择广告代号", trigger: "change" },
        ],
        pageTitle: [
          { required: true, message: "请输入页面标题", trigger: "blur" },
        ],
      },
      formSize: "small",
      labelWidth: "140px",
      applyForm: {},
      applyList: [],
      isDisabled: true,
      randomKey: "",
    };
  },
  created() {
    let query = this.$route.query;
    if (query.id) {
      this.getInfo(query.id);
      return false;
    }
    this.getList();
  },
  mounted() {},
  methods: {
    // 获取问卷项目
    getList() {
      GET_ACTIVITY_QUESTIONNAIRES().then((res) => {
        let list = res.data || [];
        list.map((k) => {
          //let cList = k.itemList || [];
          k.required = k.required ? true : false;
          k.showFlag = k.showFlag ? true : false;
          // cList.map((j) => {
          //   j.required = j.required ? true : false;
          //   j.showFlag = j.showFlag ? true : false;
          // });
          return k;
        });
        this.applyList = list;
      });
    },

    // 返回
    goBack() {
      this.$router.go("-1");
    },

    // 监听tab切换
    async onBeforeLeave(activeName, oldActiveName) {
      console.log(activeName);
      if (activeName == 2) {
        let valid = await this.$refs.addForm.validate();
        return valid;
      }
    },

    // 下一步
    nextStep() {
      this.$refs.addForm.validate((valid) => {
        if (!valid) {
          return false;
        }
        this.activeMenu = "2";
      });
    },

    // 获取详情
    getInfo(id) {
      GET_ACTIVITY_INFO({ id: id }).then((res) => {
        let obj = res.data || {};
        let options = { ...obj };

        if (options.bannerPic) {
          options.bannerPic = [
            {
              name: options.bannerPic,
              path: options.bannerPic,
              url: BASEURL + options.bannerPic,
            },
          ];
        }else{
          options.bannerPic = []
        }

        let applyList = obj.extendInfoList || [];
        applyList.map((k) => {
          k.required = k.required ? true : false;
          k.showFlag = k.showFlag ? true : false;
          return k;
        });

        delete options.extendInfoList;
        delete options.id;
        this.applyList = applyList || [];

        console.log(options)
        this.addForm = options;
        this.randomKey = Math.random();
      });
    },

    //保存活动信息
    saveInfo() {
      let _this = this;
      let query = _this.$route.query;
      let o = deepClone(this.addForm);
      let m = deepClone(this.applyList);
      let oParams = { ...o };
      let arr = [];
      let cityList = this.$store.state.cityList;

      m.map((k) => {
        let obj = {};
        obj.itemId = k.itemId;
        obj.itemValue = k.itemValue;
        obj.required = k.required ? 1 : 0;
        obj.showFlag = k.showFlag ? 1 : 0;
        arr.push(obj);
      });

      // 顶部图片
      if (oParams.bannerPic && oParams.bannerPic.length > 0) {
        let pics = [];
        oParams.bannerPic.map((k) => {
          pics.push(k.path);
        });
        oParams.bannerPic = pics.toString();
      }else{
        oParams.bannerPic = '';
      }

      // 处理城市
      if (oParams.city) {
        let _city = cityList.find((k) => k.code == oParams.city);
        oParams.cityName = _city ? _city.name : "";
      }

      oParams.extendInfoList = arr;

      //编辑
      if (query.id && query.type == "edit") {
        oParams.id = query.id;
        EDIT_ACTIVITY_INFO(oParams).then((res) => {
          if (res.code == 200) {
            showToast({
              message: "编辑成功",
              type: "success",
            });
            _this.goBack();
          }
        });
        return false;
      }

      // 新增
      ADD_ACTIVITY_INFO(oParams).then((res) => {
        if (res.code == 200) {
          showToast({
            message: "新增成功",
            type: "success",
          });
          _this.goBack();
        }
      });
    },

    // 监听富文本输入
    editorChange(e, id) {
      this.$set(this.addForm, id, e);
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/style/addActivity.scss";
</style>